<template>
    <div class="box">
        <!-- 多选题目 -->
        多项选择题目：
        <el-input class="inputboxClass"
            placeholder="编辑题目"
            v-model="wholeTitles.title.content"
            clearable>
        </el-input><br/>


            <!-- 是否必做 -->
            是否必做:
            <el-select v-model="wholeTitles.title.must" placeholder="请选择">
                <el-option
                v-for="item in mustdo"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>

        <!--在编辑题目阶段，checklist其实并没有用  -->
        <el-checkbox-group v-model="checkList">
              <!-- 循环获取每一个选项 -->
            <div v-for="(item,index) in wholeTitles.choices" :key="index">
                <el-checkbox :label=wholeTitles.choices[index].content >{{index+1}}:
                    <el-input v-model=wholeTitles.choices[index].content></el-input>
                </el-checkbox> 
            </div>    
        </el-checkbox-group>
          <!-- <button @click="con()">打印</button> -->
        <button @click="log()" v-show="false">打印</button>
        <button @click="del()">删除选项</button>
        <button @click="add()">添加选项</button>
        <br/>
    </div>
</template>

<script>
//思路大概就是，将每个选项的内容和一个输入框绑定起来，达到可编辑效果；
  export default {
    data () {
      return {
        checkList: [],
        count: 4,       //代表添加下一个时的数量

             mustdo:[{
                value: 1,                                   //1:必做
                label: '必做'                               //2：非比做
            },{
                value: 2,                               
                label:'非比做'
            }],          
           //返回的数据
            wholeTitles:{
                title:{
                    type:'',
                    must: 1,
                    content:'',                 //题目
                    titNum:'',
                },
                choices: [                       //选项的信息  
                    {
                    choiceNum: 1,                                  //choiceNum表示选项号 
                    content: "选项1"                             //表示内容
                    },{    
                    choiceNum:2,    
                    content: "选项2"
                    },{     
                    choiceNum: 3,             
                    content: "选项3"
                    }]
            }, 
      };
    },
    methods: {
        log(){
            console.log(this.wholeTitles.choices);
            console.log(this.wholeTitles.title)
        },
        del(){
            this.wholeTitles.choices.pop();
            this.count--;
        },
        add(count){
            this.wholeTitles.choices.push({
                choiceNum: count,
                content: '选项'+this.count
            });
            this.count++;
        }
    }
  };
</script>
<style  scoped>
.inputboxClass{
    width: 300px;

}


</style>
